<template>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="header">
          <img alt="logo" class="logo" :src="logo" />
          <span class="title nowrap">华君信后台管理系统</span>
        </div>
      </div>
      <div class="login">
        <a-form @submit="onSubmit">
          <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
          <a-form-item>
            <a-input v-model="loginForm.username" size="large" placeholder="用户名">
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input v-model="loginForm.password" size="large" placeholder="密码" type="password">
              <a-icon slot="prefix" type="lock" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-button :loading="logging" class="full-width" size="large" htmlType="submit" type="primary">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
  import logo from '../assets/image/logo.jpg'
  export default {
    data () {
      return {
        logo,
        logging: false,
        error: '',
        defaultInfo : {
          ip: '',
          city: '',
          cityId: ''
        },
        loginForm: {
          username: '',
          password: ''
        }
      }
    },
    created () {
      this.defaultInfo.ip = this.getUserIP()
      this.defaultInfo.city = this.getUserCity()
      this.defaultInfo.cityId = this.getUserCityId()
    },
    methods: {
      onSubmit (e) {
        e.preventDefault()
        if (!this.loginForm.username) {
          this.error = '请输入用户名'
          return
        }
        if (!this.loginForm.password) {
          this.error = '请输入密码'
          return
        }
        this.error = ''
        this.logging = true
        let params = {
          ...this.loginForm,
          ...this.defaultInfo
        }
        this.$api.common.login(params).then(res => {
          if (res?.code === 0) {
            this.logging = false
            this.$message.success('登录成功')
            let userInfo = { ...res.data }
            let token = res.data.token
            let username = res.data.username
            let phone = res.data.phone
            this.$store.commit('setToken', token)
            this.$store.commit('setUserInfo', userInfo)
            let millisecond = new Date().getTime()
            let expiresTime = new Date(millisecond + 60 * 1000 * 60 * 1) // cookie一小时失效
            this.$cookie.set('token', token, { expires: expiresTime })
            this.$cookie.set('username', username, { expires: expiresTime })
            this.$cookie.set('phone', phone, { expires: expiresTime })
            // this.$router.back()
            this.$router.replace('/')
          } else {
            this.error = res.userMsg
            this.logging = false
          }
        }).catch(err => {
          this.$message.error('服务器异常，请稍后再试')
          this.logging = false
        })
      },
      getUserCity () {
        return returnCitySN['cname']
      },
      getUserCityId () {
        return returnCitySN['cid']
      },
      getUserIP() {
        return returnCitySN['cip']
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;
    background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
    background-size: 100%;
    .content {
      padding: 32px 0;
      flex: 1;
      @media (min-width: 768px){
        padding: 146px 0 24px;
      }
      .top {
        text-align: center;
        .header {
          height: 44px;
          line-height: 44px;
          a {
            text-decoration: none;
          }
          .logo {
            height: 44px;
            vertical-align: top;
            margin-right: 16px;
          }
          .title {
            font-size: 33px;
            color: rgba(0,0,0,.85);
            font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
            font-weight: 600;
            position: relative;
            top: 2px;
            @media (max-width: 640px) {
              font-size: 24px;
            }
          }
        }
        .desc {
          font-size: 14px;
          color: rgba(0,0,0,.45);
          margin-top: 12px;
          margin-bottom: 40px;
        }
      }
      .login{
        width: 368px;
        margin: 30px auto;
        @media screen and (max-width: 576px) {
          width: 95%;
        }
        @media screen and (max-width: 320px) {
          .captcha-button{
            font-size: 14px;
          }
        }
        .icon {
          font-size: 24px;
          color: rgba(0, 0, 0, 0.2);
          margin-left: 16px;
          vertical-align: middle;
          cursor: pointer;
          transition: color 0.3s;
          &:hover {
            color: #1890ff;
          }
        }
      }
    }
  }
</style>
